<template>
  <div class="moments-layout">
    <div class="left-panel">
      <div class="p-xl">
        <AppLogo module-name="Moments" />
        <el-tree
          v-loading="loading"
          :data="timeList"
          :props="{ label: 'time', children: 'children' }"
          :default-expanded-keys="expandedKeys"
          :current-node-key="selectedTime"
          :highlight-current="true"
          node-key="time"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <template #default="{ data }">
            <span class="tree-node-content">
              <span>{{ data.time }}</span>
              <span class="text-secondary mr-sm">{{ data.num }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>

    <div class="center-panel">
      <router-view />
    </div>

    <div class="right-panel">
      <!-- 右侧内容待添加 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import { getCreatedTimeList } from '../api'
import type { CreatedTimeItem } from '../types'
import AppLogo from '@/components/AppLogo.vue'

const timeList = ref<CreatedTimeItem[]>([])
const loading = ref(false)
const selectedTime = ref<string>('')
const expandedKeys = ref<string[]>([])

// 提供给子组件（index.vue）
provide('selectedTime', selectedTime)

const fetchTimeList = async () => {
  loading.value = true
  try {
    timeList.value = await getCreatedTimeList()
    // 默认展开第一个年份
    if (timeList.value.length > 0 && timeList.value[0]) {
      expandedKeys.value = [timeList.value[0].time]
    }
  } catch (error) {
    console.error('获取时间列表失败:', error)
  } finally {
    loading.value = false
  }
}

const handleNodeClick = (data: CreatedTimeItem) => {
  // 如果是年份节点（没有"-"），添加到展开列表并查询
  if (!data.time.includes('-')) {
    if (!expandedKeys.value.includes(data.time)) {
      expandedKeys.value = [...expandedKeys.value, data.time]
    }
    // 年份节点也触发查询
    selectedTime.value = data.time
  }

  // 月份节点查询
  if (data.time.includes('-') && data.time.split('-').length === 2) {
    selectedTime.value = data.time
  }
}

onMounted(() => {
  fetchTimeList()
})
</script>

<style scoped>
.moments-layout {
  display: flex;
  height: 100vh;
  background-color: var(--el-fill-color-light);
  overflow: hidden;
}

.left-panel {
  width: 20%;
  background-color: var(--el-fill-color-light);
  overflow-y: auto;
  height: 100vh;
}

.center-panel {
  flex: 1;
  background-color: #ffffff;
  overflow-y: auto;
  height: 100vh;
}

.right-panel {
  width: 20%;
  background-color: var(--el-fill-color-light);
  overflow-y: auto;
  height: 100vh;
}

.tree-node-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex: 1;
}

/* 自定义 el-tree 选中高亮颜色 */
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

:deep(.el-tree-node.is-current > .el-tree-node__content:hover) {
  background-color: var(--el-color-primary-light-8);
}
</style>
